<template>
  <view class="relative">
    <view class="background" />
    <view class="padding-lr-30 padding-top-24">
      <view class="padding-24 filter-box ">
        <view class="flex-row margin-bottom-24">
          <view v-for="(item,index) in dateList" :key="item.date" class="date-item flex-item flex-column flex-center" :class="{checked:dateIndex === index}" @click="chooseDate(item,index)">
            <text class="text-20 color-white">{{ item.showDate }}</text>
            <text class="text-20 color-white margin-top-10">{{ item.week }}</text>
          </view>
          <view class="date-item flex-item flex-column flex-center relative" :class="{checked:dateIndex === 999}">
            <picker class="picker" mode="date" fields="day" @change="changeDate($event)">
              <view class="picker flex-column flex-center">
                <template v-if="showDate">
                  <text class="text-20 color-white">{{ showDate }}</text>
                  <text class="text-20 color-white margin-top-10">{{ week }}</text>
                </template>
                <text v-else class="text-20 color-white">更多</text>
              </view>
            </picker>
          </view>
        </view>
        <view class="flex-row">
          <view class="vehicle-status flex-row flex-item">
            <view class="flex-row flex-item relative">
              <view class="slider" :class="{transition}" :style="{left:attr.left-left+'px',width:attr.width+'px'}" />
              <view v-for="(item,index) in statusList" :id="'filter-item' + index" :ref="'filter-item' + index" :key="index" class="flex-item flex-row flex-center status-item relative" @click="changeStatus(item,index)">
                <text class="text-24 filter-text" :style="{color:statusIndex === index ? colors.fontcolorWhite : colors.fontcolorT3}">{{ item.label }}</text>
              </view>
            </view>
          </view>
          <view class="vehicle-type margin-left-30 flex-row flex-center" @click.stop="showList">
            <text class="text-24 color-white">{{ typeLabel || '全部' }}</text>
            <!-- #ifndef APP-PLUS -->
            <text class="tbb-sanjiaoxia flex-row flex-center text-24 color-t3 margin-left-10 arrow" :class="{'choose-arrow':show}" />
            <!-- #endif -->
            <!-- #ifdef APP-PLUS -->
            <text class="iconfont flex-row flex-center text-24 color-t3 margin-left-10 arrow" :class="{'choose-arrow':show}">&#xe644;</text>
            <!-- #endif -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import colors from '@/common/colors'
import { dateFormat, getElementInfo } from '@/common/util'
export default {
  name: 'CarFilter',
  props: {
    typeLabel: {
      type: String,
      default: ''
    }
  },
  data() {
    const oneDay = 1000 * 60 * 60 * 24
    const dateList = []
    for (let i = 0; i < 6; i++) {
      const date = new Date().getTime() + oneDay * i
      const obj = {
        date: dateFormat(date),
        showDate: dateFormat(date, 'MM-DD')
      }
      if (i === 0) obj.week = dateFormat(date, '今天')
      else if (i === 1) obj.week = dateFormat(date, '明天')
      else if (i === 2) obj.week = dateFormat(date, '后天')
      else obj.week = dateFormat(date, '星期W')
      dateList.push(obj)
    }
    return {
      colors,
      dateList,
      dateIndex: 0,
      showDate: '',
      week: '',
      statusList: [
        { label: '全部', value: '' },
        { label: '有单', value: 5 },
        { label: '出行', value: 3 },
        { label: '待命', value: 0 },
        { label: '维修', value: 2 }
      ],
      statusIndex: 0,
      transition: false,
      info: [],
      left: 0,
      vehicleType: '全部',
      show: false
    }
  },
  computed: {
    attr() {
      if (this.info.length) {
        return this.info[this.statusIndex]
      } else {
        return {
          left: 0,
          width: 0
        }
      }
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.statusList.forEach((item, index) => {
        getElementInfo('#filter-item' + index, res => {
          if (!index) this.left = res.left
          this.info.push({
            left: res.left,
            width: res.width
          })
        }, this)
      })
      setTimeout(() => {
        this.transition = true
      }, 300)
    },
    // 选择快捷时间
    chooseDate(item, index) {
      this.dateIndex = index
      this.$emit('changeDate', item.date)
    },
    // 选择时间
    changeDate(e) {
      this.dateIndex = 999
      const value = e.detail.value
      const date = value.replace(/-/g, '/')
      this.showDate = dateFormat(date, 'MM-DD')
      if (value === this.dateList[0].date) this.week = dateFormat(date, '今天')
      else if (value === this.dateList[1].date) this.week = dateFormat(date, '明天')
      else if (value === this.dateList[2].date) this.week = dateFormat(date, '后天')
      else this.week = dateFormat(date, '星期W')
      this.$emit('changeDate', value)
    },
    // 选择状态
    changeStatus(item, index) {
      this.statusIndex = index
      this.$emit('changeStatus', item.value)
    },
    // 显示下拉
    showList(e) {
      e.stopPropagation()
      this.show = !this.show
      this.$emit('showList', this.show)
    }
  }
}
</script>

<style scoped lang="scss">
@include setPadding(top,24);

@include setPadding($value:24);

@include setMargin(bottom,24);

.background{
  width:750rpx;
  height: 210rpx;
  background: $color-secondary;
  @include position(absolute, 0, 0);
}
.filter-box{
  background: #393F47;
  border-radius: 20rpx;
  border: 2rpx solid #2B3037;
}
.date-item{
  height: 106rpx;
  border-radius: 20rpx;
}
.checked{
  background: #2B3037;
}
.picker{
  @include position(absolute, 0, 0, 0, 0);
}
.vehicle-status{
  padding:4rpx 0 4rpx 4rpx;
  background: $color-secondary;
  border-radius: 8rpx;
  border: 2rpx solid $font-color-t2;
}
.vehicle-type{
  width: 200rpx;
  height: 64rpx;
  background: $color-secondary;
  border-radius: 8rpx;
  border: 2rpx solid $font-color-t2;
}
.status-item{
  margin-right:4rpx;
  height:56rpx;
  z-index:10;
}
.slider{
  height: 56rpx;
  background: #393F47;
  border-radius: 8rpx;
  @include position(absolute);
  z-index:2;
}
.transition{
  transition: left .3s linear;
}
.filter-text{
  transition-delay: .15s;
}
.arrow{
  transform: rotate(0deg);
  transition: transform .3s linear;
}
.choose-arrow{
  transform: rotate(180deg);
}

</style>
